<template>
	<div class="mainer-container">
		<el-main>
			<el-row style="padding:20px 0;border-bottom: 1px solid #EBEEF5;">
				<el-col>
					<el-form :inline="true" :model="formInline">
						<el-form-item>
							<el-select v-model="formInline.status" placeholder="状态">
								<el-option label="不可用" value="0"></el-option>
								<el-option label="可用" value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-input placeholder="请输入关键字" v-model="formInline.symbol"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="info" @click="queryPage()">查询</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-table :data="tableData" stripe>
				<el-table-column prop="id" label="序号" sortable align="center"></el-table-column>
				<el-table-column prop="symbol" label="名称" align="center">
					<template slot-scope="{row}">
						{{row.symbol.toUpperCase()}}
					</template>
				</el-table-column>
				<el-table-column prop="symbolPartition" label="交易区" align="center">
					<template slot-scope="{row}">
						{{row.symbolPartition.toUpperCase()}}
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="日期" sortable align="center">
					<template slot-scope="{row}">
						{{$Moment(row.createTime).format("YYYY-MM-DD HH:mm:ss")}}
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" align="center">
					<template slot-scope="{row}">
						<el-switch :disabled="row.canChange" style="display: block;height: 22px;" @change="edit(row)" :value="row.status === 1 ? true:false" active-color="#67c23a" inactive-color="#e6a23c" active-text="可用" inactive-text="不可用"></el-switch>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" align="center">
					<template slot-scope="{row}">
						<el-button size="mini" @click="queryInfo(row)" type="primary">查看K线</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSize(size)" @current-change="handleNum(num)" @prev-click="handlePrev()" @next-click="handleNext()" :current-page.sync="num" :page-size="size" layout="prev, pager, next, total, jumper" :total="total"></el-pagination>
		</el-main>
		<el-dialog :title="symbol+'动态数据'" :visible.sync="dialogVisible" width="50%">
			<template>
				<div id="myChart" style="width: 800px;height: 300px;" :options="chartOption"></div>
			</template>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false" size="small">关闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "symbolKlineInfo",
		data() {
			return {
				id: 0,
				dialogVisible: false,
				num: 1,
				size: 8,
				symbol: "",
				formInline: {
					status: "",
					symbol: "",
				},
				tableData: [],
				total: 0,
				chart: null,
				intervalInstance: null,
				chartOption: {
					tooltip: {
						trigger: 'axis',
						formatter: function (params) {
							params = params[0];
							let xValue = params.name;
							let yValue = params.value[1];
							return "日期：" + xValue + "<br>"
								+ "金额：" + yValue;
						},
						axisPointer: {
							animation: true,
							show: true
						}
					},
					xAxis: {
						name: "时间",
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						name: "金额",
						type: 'value',
						splitLine: {
							show: false
						},
						min: function (value) {
							return value.min * 0.99;
						},
						max: function (value) {
							return value.max;
						}
					},
					series: [{
						type: 'line',
						showSymbol: false,
						hoverAnimation: false,
						data: []
					}]
				}
			}
		},
		created() {
			this.queryPage();
		},
		watch: {
			dialogVisible(newVal) {
				if (!newVal) {
					this.chartOption.series[0].data = [];
					clearInterval(this.intervalInstance);
					this.intervalInstance = null;
				}
			}
		},
		methods: {
			queryPage() {//分页查询交易对
				this.api.basicInfo.symbolKline.queryPage({
					num: this.num,
					size: this.size,
					status: this.formInline.status,
					symbol: this.formInline.symbol
				}).then(result => {
					result = result.data;
					if (result.code === 200) {
						this.tableData = result.data;
						this.num = result.page.num;
						this.size = result.page.size;
						this.total = result.page.total;
					} else {
						this.$message({
							message: result.message,
							type: "warning"
						});
					}
				}).catch(() => {
					this.$message({
						message: "网络错误",
						type: "danger"
					});
				});
			},
			queryInfo(row) {//查询交易对详情
				this.dialogVisible = true;
				this.symbol = row.symbol;
				this.api.basicInfo.symbolKline.queryInfo({symbolId: row.id}).then(result => {
					result = result.data;
					if (result.code === 200) {
						const seriesData = [];
						result.data.forEach((item) => {
							let name = this.$Moment(item.createTime).format("YYYY/MM/DD HH:mm:ss");
							let value = [name, item.close];
							seriesData.push({name, value});
						});
						this.$nextTick(() => {
							//执行echarts方法
							const myChart = this.$echarts.init(document.getElementById('myChart'));
							this.chartOption.series[0].data = seriesData;
							myChart.setOption(this.chartOption);
						});
						this.task(row);
					} else {
						this.$message({
							message: result.message,
							type: "warning"
						});
					}
				}).catch(() => {
					this.$message({
						message: "网络错误",
						type: "danger"
					});
				});
			},
			task(row) {
				let that = this;
				if (that.intervalInstance == null) {
					that.intervalInstance = setInterval(function () {
						that.queryInfo(row);
					}, 1000);
				}
			},
			edit(row) {
				this.$confirm('确认调整【' + row.symbol + '】状态嘛？').then(() => {
					row.status = (row.status === 1) ? 0 : 1;
					this.api.basicInfo.symbolKline.edit(row).then(result => {
						result = result.data;
						if (result.code === 200) {
							this.$message(result.data);
							this.queryPage();
						} else {
							this.$message({
								message: result.message,
								type: "warning"
							});
						}
					}).catch(() => {
						this.$message({
							message: "网络错误",
							type: "danger"
						});
					});
				});
			},
			handlePrev() {
				this.num -= 1;
				this.queryPage();
			},
			handleNext() {
				this.num += 1;
				this.queryPage();
			},
			handleSize(size) {
				this.size = size;
				this.queryPage();
			},
			handleNum(num) {
				this.num = num;
				this.queryPage();
			}
		}
	}
</script>

<style scoped>
	.mainer-container {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		margin-bottom: 5px;
	}

	.el-pagination {
		width: 100%;
		text-align: center;
	}
</style>
